<div class="p-5 mx-auto sm:p-10 md:p-16" [ngClass]="['bg' + default, 'text' + defaultInv]">
	<div class="flex flex-col max-w-3xl mx-auto overflow-hidden rounded">
		<img
			class="w-full h-60 sm:h-96 bg-gray-500"
			src="https://source.unsplash.com/random/480x360"
			alt=""
		/>
		<div
			class="p-6 pb-12 m-4 mx-auto -mt-16 space-y-6 lg:max-w-2xl sm:px-10 sm:mx-12 lg:rounded-md"
			[ngClass]="['bg' + contrast]"
		>
			<div class="space-y-2">
				<a
					rel="noopener noreferrer"
					href="#"
					class="inline-block text-2xl font-semibold sm:text-3xl"
				>
					The Best Activewear from the Nordstrom Anniversary Sale
				</a>
				<p class="text-xs" [ngClass]="['text' + plainInv]">
					By
					<a rel="noopener noreferrer" href="#" class="text-xs hover:underline">
						Leroy Jenkins
					</a>
				</p>
			</div>
			<div [ngClass]="['text' + defaultInv]">
				<p>Insert the actual text content here...</p>
			</div>
		</div>
	</div>
</div>
